<template>
  <div>
    <a-form @submit="handleSubmit" style="width:60%;margin:0px auto;padding-top:20px;" :form="form">
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">设置登录密码</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="登录密码" help="登录密码长度不低于8位，且至少包含数字、大小写字母、特殊字符中的两种">
        <a-input placeholder="请输入登录密码" v-decorator="[
                        'loginpwd',
                        {
                            rules: [{
                            required: true, message: '请输入登录密码',
                            },{ validator: validateToNextPassword }
                            ],validateTrigger: 'blur'
                        }
                        ]" type="password" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认登录密码">
        <a-input placeholder="请输入确认登录密码" v-decorator="[
                        'loginpwd2',
                        {
                            rules: [{
                            required: true, message: '请输入确认登录密码',
                            }, {
                            validator: compareToFirstPassword,
                            }],validateTrigger: 'blur'
                        }
                        ]" type="password" />
      </a-form-item>

      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">设置支付密码</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="支付密码" help="支付密码为6位纯数字密码">
        <a-input placeholder="请输入支付密码" v-decorator="[
                        'paypwd',
                        {
                            rules: [{
                            required: true, message: '请输入支付密码',
                            },{validator: validateToNextpayword}],validateTrigger: 'blur'
                        }
                        ]" type="password" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认支付密码">
        <a-input placeholder="请输入确认支付密码" v-decorator="[
                        'paypwd2',
                        {
                            rules: [{
                            required: true, message: '请输入支付密码',
                            }, {
                            validator: compareToFirstPassword2,
                            }],validateTrigger: 'blur'
                        }
                        ]" type="password" />
      </a-form-item>

      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:9 }" class="formGroupTitle">设置安全密保</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="安全密保问题">
        <a-select style="width: 60%;" labelInValue @change="handleChange" v-decorator="[
                        'safeproblem',
                        {rules: [{ required: true, message: '请选择安全密保问题' }]}
                        ]" placeholder="请选择安全密保问题">
          <a-select-option value="problem1">您配偶的姓名是？</a-select-option>
          <a-select-option value="problem2">您母亲的姓名是？</a-select-option>
          <a-select-option value="problem3">您父亲的姓名是？</a-select-option>
          <a-select-option value="problem4">您最喜欢的动物是？</a-select-option>
          <a-select-option value="problem5">您的出生地是？</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="安全密保答案">
        <a-input placeholder="请输入安全密保答案" v-decorator="[
                        'safeanswer',
                        {
                            rules: [{
                            required: true, message: '请输入安全密保答案',
                            },{validator: validateSecurityAnswer}]
                        }
                        ]" />
      </a-form-item>
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:10 }">
          <a-button class="submitButton" type="primary" html-type="submit" :loading="loading">下一步</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
  import { message } from "ant-design-vue";
  import api from "@/common/api";
  import { error } from "util";
  import { fail } from "assert";
  export default {
    data() {
      return {
        loading: false,
        form: this.$form.createForm(this),
        loginpwd: "",
        paypwd: "",
        phonevalue: "",
        safeproblem: "",
        safeanswer: "",
        titleXsLayout: {
          span: 24
        },
        titleSmLayout: {
          span: 7
        },
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 9 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 },
            md: { span: 10, offset: 1 }
          }
        }
      };
    },

    methods: {
      handleChange(value) {
        this.safeproblem = value.label;
        console.log(`Selected: ${value}`);
      },
      doNext(step) {
        var st = step + 1;
        this.$router.push("/PersonRegister/step" + st);
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          console.log(values);
          if (!err) {
            this.loading = true;
            this.setPasswordInfo();
          }
        });
      },
      compareToFirstPassword(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue("loginpwd")) {
          callback("登录密码不一致");
        } else {
          callback();
        }
      },
      compareToFirstPassword2(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue("paypwd")) {
          callback("支付密码不一致");
        } else {
          callback();
        }
      },
      // 登录密码验证
      validateToNextPassword(rule, value, callback) {
        const form = this.form;
        if (
          value &&
          !/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?.]{8,30}$/.test(value)
        ) {
          // form.validateFields(['confirm'], { force: true });
          callback("您输入密码的格式有误！");
        } else {
          console.log("loginpwd", value);
          this.loginpwd = value;
        }
        callback();
      },
      validateToNextpayword(rule, value, callback) {
        const form = this.form;
        const reg = new RegExp("^[0-9]{6}$");
        if (value && !reg.test(value)) {
          // form.validateFields(['confirm'], { force: true });
          callback("您输入支付密码的格式有误！");
        } else {
          console.log("支付密码", value);
          this.paypwd = value;
        }
        callback();
      },
      validateSecurityAnswer(rule, value, callback) {
        if (value) {
          console.log("回答", value);
          this.safeanswer = value;
        } else {
        }
        callback();
      },
      setPasswordInfo() {
        this.phonevalue = sessionStorage.getItem("phone");
        const data = {
          mobileNo: this.phonevalue,
          // mobileNo: 18239464417,
          memberType: "CU",
          password: this.loginpwd,
          payPassword: this.paypwd,
          securityQuestion: this.safeproblem,
          securityAnswer: this.safeanswer
        };
        api.setPassword(
          data,
          res => {
            console.log("res", res);
            if (res.code == "OK") {
              sessionStorage.setItem("memberNo", res.data);
              this.loading = false;
              // this.$message.warning("设置成功");
              this.doNext(3);
            } else {
              this.$message.warning(res.message);
            }
          },
          err => {
            console.log(err);
            // this.$message.warning("服务器错误");
            //  this.Confirm = false;
          }
        );
      }
    }
  };
</script>


<style scoped>
  .ant-input {
    width: 60%;
  }

  .submitButton {
    width: 8vw;
  }

  .formGroupTitle {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    margin-bottom: 10px;
  }
</style>